import "./role.css"
import React, { RefObject, useState } from 'react'
import { ImageUploader, Space, Toast, Dialog } from 'antd-mobile'
import {
    Form,
    Input,
    Button,
    TextArea,
    DatePicker,
    Selector,
    Slider,
    Stepper,
    Switch,
} from 'antd-mobile'
import dayjs from 'dayjs'
// import { demoSrc, mockUpload, mockUploadFail } from './utils'

const Basic = () => {
    const [fileList, setFileList] = useState([
        {
            url: '',
        },
    ]);
    return (<ImageUploader value={fileList} onChange={setFileList} />);
};

function Role() {
    const onFinish = (values) => {
        Dialog.alert({
            content: <pre>{JSON.stringify(values, null, 2)}</pre>,
        })
    }


    return (
        <div>
            <Form
                layout='horizontal'
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        提交
                    </Button>
                }
            >
                <Form.Header><h1>创建/修改英雄</h1>
                </Form.Header>
                <Form.Item
                    name='name'
                    label='英雄名称'
                    rules={[{ required: true, message: '英雄名称不能为空' }]}

                >
                    <Input onChange={console.log} placeholder='输入你的英雄的名称' />
                </Form.Item>
                <Form.Item name='address' label='英雄限定词'
                    rules={[{ required: true, message: '英雄限定词不能为空' }]}
                >
                    <TextArea
                        placeholder='请输入英雄台词'
                        maxLength={100}
                        rows={2}
                        showCount
                    />
                </Form.Item>



                <Form.Item label='英雄头像' name='address' rules={[{ required: true }]} >

                    <Basic />

                </Form.Item>



                <Form.Item
                    name='name'
                    label='英雄介绍'
                    rules={[{ required: true, message: '姓名不能为空' }]}

                >
                    <Input onChange={console.log} placeholder='输入你的英雄介绍' />
                </Form.Item>

            </Form>


        </div>
    )
}
export default Role